<script setup lang="ts">
import MovieTabbar from "@/components/movie-tabbar/MovieTabbar.vue"
import {onLoad, onShow} from "@dcloudio/uni-app";
import {computed, ref} from "vue";
import {useStore} from "vuex";
import type {DoChargeReqVO, UserInfo} from "@/interfaces/user-info";
import {useDoChargeApi} from "@/services/api";

const store = useStore()
const userInfo = computed((): UserInfo => store.getters["auth/getUserInfo"])
const userId = computed((): string => store.getters["auth/getUserId"])
const token = computed((): string => store.getters["auth/getToken"])
const show = ref<boolean>(false)
const showChargeModel = ref<boolean>(false)
const doChargeReq = ref<DoChargeReqVO>({
  id:"",
  userId:""
})
const orderCount = ref<number>(0)
const goLogin = () => {
  if (userInfo.value.nickName) return
  uni.navigateTo({
    url: "/pages/login/index"
  })
}
const logout = async () => {
  show.value = true
}
const confirm = async () => {
  await store.dispatch("auth/logout")
  show.value = false
  await store.dispatch("auth/setActiveTab","index")
  await uni.switchTab({
    url: "/pages/index/index"
  })
}
const goOrderList = () => {
  if(!token.value){
    goLogin()
  }else {
    uni.navigateTo({
      url: "/pages/mine/order-list"
    })
  }

}
const goMyInfo = () => {
  if(!token.value){
    goLogin()
  }else {
    uni.navigateTo({
      url: "/pages/mine/my-info"
    })
  }
}
const showCharge = () => {
  if(!token.value) {
    goLogin()
  }else {
    showChargeModel.value = true
    doChargeReq.value.userId = userId.value
  }
}
const doCharge = async () => {
  try {
    await useDoChargeApi(doChargeReq.value)
    await store.dispatch("auth/reloadUserInfo")
    showChargeModel.value = false
  }catch {
    showChargeModel.value = false
  }
}
onShow(async ()=>{
  await store.dispatch("auth/reloadUserInfo")
})
onLoad((query) => {
})

</script>

<template>
  <view class="container">
    <view class="user-info">
      <view class="avatar">
        <up-avatar :src="userInfo.avatar" size="120" default-url="http://localhost:8080/images/avatar.jpg"></up-avatar>
      </view>
      <view class="nick-name" @tap="goLogin">
        {{ userInfo.nickName || '立即登录' }}
      </view>
    </view>
    <view class="wallet-order">
      <view class="wallet">
        <view class="left">
          <view class="title">
            钱包
          </view>
          <view class="content">
            ￥{{ userInfo.wallet }}
          </view>
        </view>
        <view class="right">
          <u-icon name="red-packet-fill" size="81"></u-icon>
        </view>
      </view>
      <view class="order" @tap="goOrderList">
        <view class="left">
          <view class="title">
            订单
          </view>
          <view class="content">
            {{ userInfo.orderCount }}
          </view>
        </view>
        <view class="right">
          <u-icon name="order" size="81"></u-icon>
        </view>
      </view>
    </view>
    <view class="list">
      <u-cell-group :border="false">
        <u-cell icon="setting-fill" title="个人设置" :isLink="true" :border="false" @click="goMyInfo"></u-cell>
        <u-cell icon="rmb-circle-fill" title="充值" :isLink="true" :border="false" @click="showCharge"></u-cell>
        <u-cell icon="integral-fill" title="退出登录" :isLink="true" :border="false" @click="logout"></u-cell>
      </u-cell-group>
    </view>
    <u-modal :show="show" title="提示" @confirm="confirm" ref="uModal" :asyncClose="true" :showCancelButton="true">
      <view>
        是否退出登录？
      </view>
    </u-modal>
    <movie-tabbar></movie-tabbar>
    <u-modal
        :show="showChargeModel"
        title="充值"
        :showCancelButton="true"
        :asyncClose="true"
        @confirm="doCharge"
        @cancel="showChargeModel = false"
    >
      <up-input v-model="doChargeReq.id" placeholder="请输入卡密"></up-input>
    </u-modal>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.container:before {
  content: "";
  width: 120vw;
  height: 120vw;
  border-radius: 50%;
  background-color: rgba(69, 73, 106, 0.3);
  position: absolute;
  z-index: -2;
  transform: translateY(-50%);
  filter: blur(40px);
  box-shadow: 0 0 50px rgba(69, 73, 106, 0.3),
  0 0 60px rgba(69, 73, 106, 0.3),
  0 0 70px rgba(69, 73, 106, 0.3),
  0 0 80px rgba(69, 73, 106, 0.3);
  right: 30%;
  top: -5%;
}

.container:after {
  content: "";
  width: 120vw;
  height: 120vw;
  border-radius: 50%;
  background-color: rgba(232, 204, 199, 0.3);
  filter: blur(40px);
  box-shadow: 0 0 50px rgba(232, 204, 199, 0.3),
  0 0 60px rgba(232, 204, 199, 0.3),
  0 0 70px rgba(232, 204, 199, 0.3),
  0 0 80px rgba(232, 204, 199, 0.3);
  position: absolute;
  z-index: -1;
  transform: translateY(-50%);
  left: 40%;
  top: -10%;
}

.user-info {
  margin-top: 48rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 64rpx;
  gap: 36rpx;
}

.avatar {
  border-radius: 50%;
  box-shadow: 0 24rpx 36rpx #999999;
}

.nick-name {
  font-weight: bold;
  font-size: 36rpx;
}

.wallet-order {
  display: flex;
  flex-direction: row;
  padding: 36rpx;
  gap: 24rpx;
}

.wallet, .order {
  flex: 1;
  padding: 24rpx 36rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  box-shadow: 10rpx 10rpx 24rpx rgba(0, 0, 0, 0.2),
  -10rpx -10rpx 24rpx rgba(255, 255, 255, 1),
  5rpx 5rpx 24rpx rgba(0, 0, 0, 0.1) inset,
  -5rpx -5rpx 24rpx rgba(255, 255, 255, 1) inset;
}

.left, .right {
  flex: 1;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet {
  background-color: rgba(241, 178, 178, 0.4);
}

.order {
  background-color: rgba(125, 139, 174, 0.4);
}

.title {
  font-size: 24rpx;
  color: #999999;
}

.content {
  font-size: 48rpx;
  font-weight: bold;
}

.list {
  padding: 36rpx;
}
</style>